<template>
  <div class="statistics-container">
    <el-card class="statistics-card">
      <template #header>
        <div class="card-header">
          <span>赛事数据统计</span>
          <el-button type="primary" size="small">导出报表</el-button>
        </div>
      </template>
      
      <!-- 统计概览 -->
      <div class="overview-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">24</div>
              <div class="stat-label">总赛事数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">8</div>
              <div class="stat-label">进行中赛事</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">128</div>
              <div class="stat-label">参赛选手</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">¥150,000</div>
              <div class="stat-label">总奖金池</div>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <!-- 图表区域 -->
      <div class="charts-area">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <template #header><span>赛事类型分布</span></template>
              <div class="chart-container" style="height: 300px;">
                <!-- 这里可以放置图表组件 -->
                <div class="chart-placeholder">图表加载中...</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <template #header><span>月度赛事数量</span></template>
              <div class="chart-container" style="height: 300px;">
                <!-- 这里可以放置图表组件 -->
                <div class="chart-placeholder">图表加载中...</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <!-- 数据表格 -->
      <div class="data-table">
        <el-card>
          <template #header><span>赛事成绩统计</span></template>
          <el-table :data="statisticsData" style="width: 100%">
            <el-table-column prop="name" label="赛事名称" width="200" />
            <el-table-column prop="date" label="举办日期" width="150" />
            <el-table-column prop="participants" label="参赛人数" width="100" />
            <el-table-column prop="winner" label="冠军" width="150" />
            <el-table-column prop="prize" label="奖金" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === 'completed' ? 'success' : 'warning'">{{ scope.row.statusText }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 模拟数据
const statisticsData = ref([
  {
    name: '夏季联赛',
    date: '2024-06-15',
    participants: 32,
    winner: '张三',
    prize: '¥50,000',
    status: 'completed',
    statusText: '已完成'
  },
  {
    name: '秋季挑战赛',
    date: '2024-09-20',
    participants: 24,
    winner: '李四',
    prize: '¥30,000',
    status: 'completed',
    statusText: '已完成'
  },
  {
    name: '冬季大师赛',
    date: '2024-12-10',
    participants: 48,
    winner: '-',
    prize: '¥70,000',
    status: 'ongoing',
    statusText: '进行中'
  }
])
</script>

<style scoped>
.statistics-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.statistics-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overview-stats {
  margin-bottom: 20px;
}

.stat-item {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.charts-area {
  margin-bottom: 20px;
}

.chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  color: #909399;
  font-size: 14px;
}

.data-table {
  margin-top: 20px;
}
</style>